<template>
    <transition name="el-fade-in-linear">
        <div class='app' v-loading="loading">
            <div class='titles2'>
                
            </div>
            <div class='ceng '>
            
            
                <div class='content'>
                    <div class='item ' v-for="(item,index) in data" :key="index" >
                        <div class='flex-column item_warp' @click="openWin(item)">
                            <div >
                            
                            <img :src="item.icon"  style='width:100%'/>
                            </div>
                            
                        </div>
                    </div>
                    
                    
                </div>
            
            </div>
            <div class='bottoms'></div>
            <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="70%"
                >
                
                <el-form ref="form"  label-width="80px">
                    <el-form-item label="旧密码">
                        <el-input v-model="oldPwd" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-form ref="form"  label-width="80px">
                    <el-form-item label="新密码">
                        <el-input v-model="newPwd" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-form ref="form"  label-width="80px">
                    <el-form-item label="确认密码">
                        <el-input v-model="newPwd2" show-password></el-input>
                    </el-form-item>
                </el-form>
                <el-alert
                    title="密码中必须包含字母（不区分大小写）、数字，至少8个字符，最多30个字符"
                    type="error"
                    show-icon>
                </el-alert>
                
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updatePwdHt">确 定</el-button>
                </span>
                </el-dialog>
        </div>
    </transition>
</template>
<script>
export default {
    data(){
        return {
            loading:true,
            title:'',
            modelId:'',
            data:[],
            titles:'',
            modelIds:'',
            oldPwd:'',
            newPwd:'',
            newPwd2:'',
            filenames:"一体机平台",
            dialogVisible:false,
            isApp:"N",
            isYtj:"N",
            sCode:"",
            username:localStorage.getItem("username")
        }
    }, 
    created(){
      this.title=this.$route.query.title;
     // console.log(this.$route.query.titles);
    
     if(!this.$route.query.title){
         this.title=localStorage.getItem("company");
     }
     if(this.$route.query.isApp){
         this.isApp=this.$route.query.isApp;
     }
     if(this.$route.query.filenames){
         this.filenames=this.$route.query.filenames;
     }
     if(this.$route.query.isYtj){
         this.isYtj=this.$route.query.isYtj;
     }
     this.sCode=localStorage.getItem("sCode");
    document.title=this.title;
     
   
    
      this.loadData();
      
        let sef=this;

       // window.setTimeout(function(){
             document.getElementsByClassName("app")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/daping.jpg')"
       // },1000)
        
    },
    mounted(){
        let sef=this;
        try{
        // window.setTimeout(function(){
             document.getElementsByClassName("app")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/daping.jpg')"
       // },1000)
        }catch(e){}
       
       window.setTimeout(function(){
             document.getElementsByClassName("app")[0].style.backgroundImage="url('"+localStorage.getItem("imgytjIp")+"/rootImg/ytj/"+sef.sCode+"/daping.jpg')"
        },1000)
       
    },
    watch:{
        modelId(val){
            this.loadData();
        }
    },
    methods:{
        freshs(){
            location.reload()
        },
        loadData(){
            this.loading=true;
            if(!this.modelId){
                /*this.data=[{
                        text:'殡仪馆业务管理系统',
                        fa:'fa fa-university',
                        modelId:'1',
                        classItem:'img item1'
                    },
                    {
                        text:'公墓管理系统',
                        fa:'fa fa-inbox',
                        modelId:'363',
                        classItem:'img item4'
                    },
                    {
                        text:'OA办公',
                        fa:'fa fa-television',
                        modelId:'299',
                        classItem:'img item2',
                        id:'299'
                    },
                    {
                        text:'权限管理',
                        fa:'fa fa-users',
                        modelId:'31',
                        classItem:'img item3',
                        id:'31',
                        isModel:'Y'
                    }]*/
                    this.modelId="-1";
            } 
            let sef=this;
            let imgIp=localStorage.getItem("imgytjIp") 
            /**获取桌面模块，目前定义所有的模块显示，没有设置自主模块 */
            
            this.$post('api','api/model/getUserModelsByJson',{filename:this.filenames,isApp:this.isApp,isYtj:"Y"}).then(res=>{
            
                let nav=JSON.parse(unescape(res[0].nav));
                console.log(nav);
                sef.data=[];
                for(let i=0;i<nav.length;i++){
                    let index=i+1;
                    if(index>6){
                            index=index%6;
                    }
                        
                    let n=nav[i];
                   // n.icon=imgIp+n.icon;
                    n.icon=imgIp+"/rootImg/ytj/ysx/mod"+(i+1)+".png";
                    n.classItem="img item"+index;

                   

                    sef.data.push(n);
                    this.loading=false;
                }
                let sizes=5-nav.length%5;
                for(let i=0;i<sizes;i++){
                   // sef.data.push({});
                }
            });
            
        },

        openWin(item){
            console.log(item);
            let url="";
            if(item.children.length>1){
                url="/mainChild";
                this.$router.push({path:url,query:{children:JSON.stringify(item.children),title:item.text}});
            }else{
                item=item.children[0]
                this.$router.push({path:item.url,query:{filename:item.filename,title:item.name,appid:item.appid,dbModelKey:item.dbModelkey}});
            }
            
            /*
            let url="";
             if(item.url=="main"){
                this.titles=this.titles+","+item.text;
                this.modelIds=this.modelIds+","+item.id;
              
                url="/main";
            }else if(item.url.indexOf("tabMain")!=-1){
                this.titles=this.titles+","+item.text;
                this.modelIds=this.modelIds+","+item.id;
                let filename=item.filename;
                let key=item.key;
                url= "/byg/tabMain?title="+item.text+"&filename="+filename
            }else if(item.url.indexOf("list")!=-1){
               
                let key=item.key;
                url=item.url.indexOf("?")==-1 ? item.url+"?key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey:item.url+"&key="+key+"&appid="+item.appid+"&isApp=Y"+"&model="+item.model+"&dbModelkey="+item.dbModelkey;
            }else if(item.url!=''){
                this.titles=this.titles+","+item.text;
                this.modelIds=this.modelIds+","+item.id;
                let filename=item.filename;
                url=item.url.indexOf("?")==-1 ? item.url+"?title="+item.text+"&filename="+filename:item.url+"&title="+item.text+"&filename="+filename;
            }else{
                let titles=this.titles+","+item.text;
                this.modelIds=this.modelIds+","+item.id;
                let filename=item.filename;
                let key=item.key;
                url= "/byg/tabMain?title="+item.text+"&filename="+filename
            }
            console.log("url===================="+url);
            if(url.indexOf("main?")!=-1){
                this.title=item.text;
               
            }else{

                this.$router.push({path:url});
            }*/
            
        },
        returns(){
            
           let titles=this.titles.split(",")
           this.title=titles[0];
           this.modelId="-1";
           
        },
        logout(){
            this.$router.push({path:"/login?sCode="+localStorage.getItem("sCode")+"&logout=Y"});
            sessionStorage.setItem("token","");
            localStorage.setItem("username","");
            localStorage.setItem("userId","");
            localStorage.setItem("company","");
        },
        updatePwd(){
            this.oldPwd="";
            this.newPwd2="";
            this.newPwd="";
            this.dialogVisible=true;

        },
        updatePwdHt(){
            let isOk=true;
            if(this.newPwd==''){
                isOk=false;
                this.$alert("密码不能为空", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(this.newPwd!=this.newPwd2&&isOk){
                isOk=false;
                this.$alert("两次密码不一致，请检查", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
            if (!pwdRegex.test(this.newPwd)&&isOk) {
                isOk=false;
                this.$alert("密码必须包含字母和数字，并且要大于8位数", '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        
                    }
                });
            }
            if(isOk){
                 this.$post("api","api/login/updatePwd",{oldPwd:this.oldPwd,newPwd:this.newPwd}).then(data=>{
                     this.$alert(data[0].msg, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            if(data[0].status=="+OK"){
                                this.dialogVisible=false;
                            }
                        }
                    });
                     
                })
            }
        }
    }
}
</script>

<style scoped >
html{
    height:100%;
    width:100%;
}
.app{
    height:100%;
    width:100%;
    
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.flex-column{
    display:-moz-box;
    display: -webkit-box;
    display: box;
    display:-webkit-flex;
    display:flex;
    flex-direction: column;
    align-items: center;  
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
.ceng{
    width:80%;
    display:flex;
    flex:1;
    flex-direction: column;
    box-sizing: border-box;
    /*background-color:rgba(0, 3, 12,0.46);*/
    border-radius: 7px;
    align-items: flex-start;
   
}
header{
    height:100px;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-box-flex-group: 1;
    order: 1;
    width:100%;
    vertical-align: middle;
    line-height:100px;
    display:flex;
    flex-direction: row;
    border:1px solid red;
}
header > img{
    width:60px;
    display: inline-block;
    align-self: center;
    -webkit-box-align: center;
    vertical-align:middle;
}
header > span{
    align-self: center;
    -webkit-box-align: center;
    line-height:60px;
    display:inline-block;
    font-size:60px;
    margin-left:10px;
    vertical-align:middle;
    font-family:"lss","微软雅黑", "Dosis", sans-serif;  
    /**color:#fefefe;**/
    color:#5069ab;
    text-shadow:
    0px 1px 0px #9fa1a7,
    0px 6px 6px rgba(111, 153, 252, 0.2);
    letter-spacing: 5px;
    
}
header> i{
    float:left;
    color:#5069ab;
    font-size:22px;
    background-color: #fff;
    padding:10px;
    border-radius: 5px;;
    cursor: pointer;
}
header>i::after{
    content:'返回';
    padding-left:10px;
    font-family:"lss","微软雅黑", "Dosis", sans-serif;  
}
header>i:hover{
    background:#738dd4;
    color:#fff;
}
header > span::after{
    content:'V1.0';
    font-size:22px;
}
footer{
    height:40px;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-box-flex-group: 3;
    order: 3;
    width:100%;
}
.content{
   /* -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-box-flex-group: 2;
    order: 2;*/
    flex:1;
    width:100%;
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top:5%;
  
}

.item{
    width:16%;
    padding:15px;
    border-radius: 5px;
   

    /*height:240px;*/
}
.item_warp{
    width:100%;
    display:inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: pointer;
   
}
.item_warp:hover{
   background-color:rgb(0, 0, 0,0.1);
   
}

.item .img{
    flex:1;
    width:100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 10px;
    text-align:center;
    vertical-align: middle;

}
.item .img img{
    width:100px;
    vertical-align: middle;

}
.item .img i{
    color:#fff;
    font-size:80px;
    line-height:140px;
    
}
.item .itemx{
    height:30px;
    width:100%;
    text-align:center;
    color:#fff;
    font-weight: bold;
    margin-top:10px;
    cursor: pointer;
    font-size:12px;
}
.item1 img:hover{
    background: rgba(0, 147, 255, 1) no-repeat;
}
.item2 img:hover{
    background: rgba(0, 147, 255, 1) no-repeat;
}
.item3 img:hover{
    background: rgba(0, 147, 255, 1) no-repeat;
}
.item1{
   /* background: linear-gradient(135deg,#56c8ff,#6f99fc) no-repeat;*/
}
.item22{
    background:linear-gradient(to right, #bb313e25, #bb313e25, #d7222925, #dd4a1625, #e4761525, #f5c50025, #f0e92725, #b1ce2425, #48a93525, #03944525, #157c4f25, #176a5825, #1b556325, #1d386f25, #1d386f25, #20277825, #52266325, #8a244b25);
}
.item2{
    /*
    background: linear-gradient(#f0a98a, #eb7168);*/
}
.item3{
    /*
    background: linear-gradient(135deg,#91cbe9,#6f99fc) ;*/
}
.item4{
    background: linear-gradient(135deg,#ecce7b,#f7a64a) ;
}
.item5{
    background: linear-gradient(135deg,#ec7b81,#f14747) ;
}
.item6{
    
    background: linear-gradient(#ffe233, #fc8c54);
}
.headers{
    width:100%;
    display: flex;
    flex-direction: row;
    padding:20px;
    padding-right:20px;
    box-sizing: border-box;
}
.custom{
    flex:1;
}
.custom img{
    width:28px;
}
.user span{
   /* position: absolute;
    right:20px;
    top:0;
    color:#5069ab;*/
    color:#fff;
}
.user i{
    color:rgba(54, 135, 225, 1);
}
.user img{
    vertical-align: middle;
}
.titles2{
    height:10%;
    text-align:center;
    width:100%;
    color:#fff;
    font-size:35px;
    font-family: PingFangSC-Regular, PingFang SC;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.titles2 img{
    width:42px;
    vertical-align: middle;
    margin-right:8px;
}
.bottom{
    height:30px;
    padding:10px;
    font-size:10px;
    text-align:center;
    width:100%;
    color:rgba(223, 223, 223, 1);
}
.bottoms{
    height:15%;
}
</style>